<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>行为样式设置</title>
<script type="text/javascript" src="../../js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../js/template.min.js"></script>
<script type="text/javascript" src="../../js/extgrid/jquery.extGrid.js"></script>
<script type="text/javascript" src="../../js/extgrid/jquery.extGrid.responsive.js"></script>

<link rel="stylesheet" type="text/css" href="../../js/extgrid/themes/default/skin.css">
</head>
<body>
<h4>行为样式设置</h4>
<style type="text/css">
.extgrid-row-single {  background: #F8F8F8; }
.extgrid-border {
	border:1px solid #D12610;
}
.extgrid-row-over { background:#FEFADD;}
.extgrid-row-selected {background: #A3C8F2;}
.row-error { color:red;}
.row-error .weight { font-weight:bold;}/*单元格样式*/
.row-wanning { color:#FF3AFF}
.row-wanning .weight { font-weight:bold;}/*单元格样式*/
</style>
<div style="width:100%; height:400px; overflow:hidden;" id="extgrid">
	
</div>
<script type="text/javascript">
var getData = function(){
	var len = 300;
	var data = [];
	for( var i=0;i<len;i++ ) {
		data.push({
			id : i+1,
			username : '张三'+i,
			alias : '小明',
			gender : i%5,
			age : i%90,
			birthday : '2012-08-09',
			tel : 13124587451,
			country : '地球',
			address : '地球村',
			qq : 123456,
			hobby : '随便'
		});
	}
	return data;
}
var columns = [
					{field:'username',title:'用户名',width:'20%'},
					{field:'alias',title:'别名',width:'15%'},
					{field:'gender',title:'性别',width:'15%',bcls:'weight',reader:{0:'伪娘',1:'男',2:'女',_default_:'外星人'}},
					{field:'age',title:'年龄',width:'15%'},
					{field:'birthday',title:'生日',width:'20%'}
				];
var datas = getData();			
$(function(){
	$("#extgrid").extgrid({
		columns:columns,
		rowNumbersWidth:40,
		checkBox : true,
		containerCss : 'extgrid-border',//边框样式
		clsOverRow : 'extgrid-row-over',//行样式
		clsSelectRow : 'extgrid-row-selected',//行样式
		clsSingleRow : 'extgrid-row-single',//单号行样式
		clsDoubleRow : 'extgrid-row-double',//双号行样式
		rowStyler : function(tr,rid,rowData){//自定义行样式
			if( rowData['age']<10 || rowData['age']>90 ) {
				return 'row-error';
			}
			if( rowData['gender']==0 ) {
				return 'row-wanning';
			}
		},
		pageSize : 300,
		minWidth : 450,
		data : datas,
		onFinish : function(){
			var self = this;
			$(window).resize(function(e){
				self.resize();					  
			});	
		}
	});
});
</script>
</body>
</html>
